<template>
  <div
    style="
      background-color: white;
      border: 1px solid grey;
      border-radius: 5px;
      height: auto;
    "
  >
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目登记</el-breadcrumb-item>
      <el-breadcrumb-item
        >县级财政性资金采用政府直接投资和资本金注入方式的建设项目</el-breadcrumb-item
      >
    </el-breadcrumb>

    <span id="a3">
      <h1>项目登记</h1>
      <p class="p1">请填写项目相关信息</p>
    </span>
    <el-divider></el-divider>

    <div style="margin-bottom: 100px">
      <el-row class="row3">
        <el-col :span="3" class="x"
          ><p class="p2">*项目预计规划地址:</p></el-col
        >
        <el-col :span="6" class="y"
          >
          <el-select v-model="form.projectAddress" placeholder="请选择">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <input
            type="text"
            v-model="form.projectAddress"
            style="height: 34px; width: 213.4px"
        /> -->
        </el-col>

        <el-col :span="3" class="x"
          ><p class="p2">*企业id：</p>
          :</el-col
        >
        <el-col :span="6" class="y"
          ><input
            type="text"
            v-model="form.enterpriseId"
            style="height: 34px; width: 213.4px"
        /></el-col>
      </el-row>
      <el-row class="row3">
        <el-col :span="3" class="x" style="height: 70px"
          ><p class="p2">*项目名称:</p></el-col
        >
        <el-col :span="15" class="y" style="height: 70px"
          ><input
            type="text"
            v-model="form.applyName"
            style="width: 668px; height: 30px"
          />
          <p style="margin-top: 0; font-size: 3px; text-align: left">
            项目名称30个字以内，格式可参照“xx县人民医院新院区建设项目或xx公司年产120万平方米高端陶瓷地砖项目”
          </p></el-col
        >
      </el-row>
      <el-row class="row3">
        <el-col :span="3" class="x"><p class="p2">*项目类型:</p></el-col>
        <el-col :span="6" class="y">
          <el-select v-model="form.projectType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3" class="x"
          ><p class="p2">*预计投资金额(万)：</p></el-col
        >
        <el-col :span="6" class="y"
          ><input
            type="text"
            v-model="form.investment"
            style="height: 34px; width: 213.4px"
        /></el-col>
      </el-row>
      <el-row class="row3">
        <el-col :span="3" class="x"
          ><p class="p2">*项目具体分类：</p>
          :</el-col
        >
        <el-col :span="6" class="y">
          <el-select v-model="form.specificType" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3" class="x"><p class="p2">*预计收益(万):</p></el-col>
        <el-col :span="6" class="y"
          ><input
            type="text"
            v-model="form.revenue"
            style="height: 34px; width: 213.4px"
        /></el-col>
      </el-row>
      <el-row class="row3">
        <el-col :span="3" class="x"
          ><p class="p2">*项目预计施工时间:</p></el-col
        >
        <el-col :span="6" v-model="form.startTime" class="y">
          <el-date-picker
            v-model="form.startTime"
          type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日 "
                value-format="yyyy-MM-dd"

          >
          </el-date-picker
        ></el-col>
        <el-col :span="3" class="x"
          ><p class="p2">*项目预计结束时间:</p></el-col
        >
        <el-col :span="6" v-model="form.lifeCycle" class="y">
          <el-date-picker
            v-model="form.lifeCycle"
        type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日 "
                value-format="yyyy-MM-dd"
          >
          </el-date-picker
        ></el-col>
      </el-row>
      <el-row class="row3" style="display: flex">
        <h3 style="color: gray">文件上传</h3>

        <!-- <el-upload
          class="upload-demo"
          :action="postUrl"
          :limit="1"
          :headers="headerObj"
          v-model="file.file"
          :on-success="handleSuccess"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取简历</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
            >上传</el-button
          >
        </el-upload> -->
        <!-- <el-upload
          drag
          :limit="3"
          ref="upload"
          v-model="file.file"
          enctype="multipart/form-data"  
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF,docx,xls"
          :headers="headerObj"
          action="http://192.168.43.140:8091/apply/addProject/upload"
          :on-success="handleSuccess"
          :on-error="handleErr"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :before-remove="beforeRemove"
          :on-change="handleChange"
        >
          <el-button size="small" type="primary" style="margin-top: 70px"
            >点击上传</el-button
          >
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload> -->

        <el-upload
          class="upload-demo"
          action="http://192.168.43.140:8091/apply/addProject"
          multiple
          drag
          :on-success="handleSuccess"
          :on-error="handleErr"
          :on-change="handleChange"
          :file-list="fileList"
        >
          <el-button size="small" type="primary" style="margin-top:70px">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-row>
      <el-row style="margin-top: 50px" class="row3">
        <el-button style="margin-left: 406px" @click="onRegister"
          >确认登记</el-button
        ></el-row
      >
    </div>
  </div>
</template>
<script >
import Qs from 'qs'
export default {
  data() {
    return {
      // postUrl: "http://192.168.43.140:8091/apply/addProject/upload",
      fileList: [
        // {
        //   name: "food.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
      ],
      // headerObj: {
      //   // Authorization: window.sessionStorage.getItem("token"),
      //   "Content-Type": "multipart/form-data",
      // },
      form: {
        projectType: null,
        specificType: "",
        lifeCycle: null,
        projectAddress: "",
        enterpriseId: "",
        applyName: "",
        investment: "",
        revenue: "",
        startTime: null,
        paper: "",
      },
      options: [
        {
          value: 1,
          label: "基本建设类项目",
        },
        {
          value: 2,
          label: "技术改造类项目",
        },
        {
          value: 3,
          label: "单纯购置项目",
        },
      ],
      options2: [
        {
          value: "0",
          label: "建筑行业",
        },
        {
          value: "1",
          label: "教育行业",
        },
        {
          value: "2",
          label: "水利，环境，公共设施",
        },
        {
          value: "3",
          label: "农，林，牧，渔业",
        },
        {
          value: "4",
          label: "电力，燃气，能源",
        },
      ],
      options3:[
        {
          value:"武川县",
          label:"武川县",
        },
        {
          value:"土默特左旗",
          label:"土默特左旗",
        },
        {
          value:"回民区",
          label:"回民区",
        },
        {
          value:"玉泉区",
          label:"玉泉区",
        },
        {
          value:"新城区",
          label:"新城区",
        },
        {
          value:"赛罕区",
          label:"赛罕区",
        },
        {
          value:"托克托县",
          label:"托克托县",
        },
        {
          value:"和林格尔县",
          label:"和林格尔县",
        },
        {
          value:"清水河县",
          label:"清水河县",
        },
      ]
    };
  },
  methods: {
    async onRegister() {
      await this.$http
        .post("http://192.168.43.140:8091/apply/addProject",Qs.stringify (this.form))
        .then((res) => {
          console.log(res);
          this.$router.push("/platform/first");
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // //文件上传
    // onRegister() {
    //   this.$refs.upload.submit();
    // },
    // //上传成功后回调
    // handleSuccess(data) {
    //   if (data.code == 0) {
    //     this.ruleForm.fileUrl = data.data.fileName;
    //   }
    // },
    handleSuccess(res) {
      console.log("success");
      this.form.paper= res.data;
      console.log(this.form.paper);
    },
    handleErr() {
      console.log("error");
    },

    //   handleRemove(file, fileList) {
    //       console.log(file, fileList);
    //     },
    //     handlePreview(file) {
    //       console.log(file);
    //     },
    //     handleExceed(files, fileList) {
    //       this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    //     },
    //     beforeRemove(file) {
    //       return this.$confirm(`确定移除 ${ file.name }？`);
    //     },

    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },

    beforeAvatarUpload(f) {
      var testmsg = f.name.substring(f.name.lastIndexOf(".") + 1);
      const extension = testmsg === "docx";
      const extension2 = testmsg === "xls";
      const isLt2M = f.size / 1024 / 1024 < 10;
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 xls、docx格式!",
          type: "warning",
        });
      }
      if (!isLt2M) {
        this.$message({
          message: "上传文件大小不能超过 10MB!",
          type: "warning",
        });
      }
      return extension || (extension2 && isLt2M);
    },
  },
  created() {
    this.form.projectType=sessionStorage.getItem("tag");
    if (sessionStorage.getItem("tag")=='基本建设类项目') {

      this.form.projectType=1
    } 
    if (sessionStorage.getItem("tag")=='技术改造项目') {
      this.form.projectType=2
    } 
    if (sessionStorage.getItem("tag")=='单纯购置项目') {
      this.form.projectType=3
    } 
  },
};
</script>
<style>
.el-upload-dragger {
  width: 810px;
  margin-top: 20px;
}
#a3 {
  display: flex;
  margin-left: 150px;
}
.p1 {
  padding-top: 10px;
  margin-left: 20px;
  color: grey;
}
.el-divider {
  width: 85%;
  margin-left: 100px;
  height: 3px;
}
.row3 {
  margin-left: 250px;
}
.x {
  background-color: #f7f7f7;
  border: 1px solid grey;
  height: 50px;
}
.y {
  background-color: #fff;
  border: 1px solid grey;
  height: 50px;
  padding-top: 5px;
  padding-left: 50px;
}
.p2 {
  text-align: center;
}
</style>